<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>PHP给照片添加水印</title>
	<script src="jquery-1.11.3.js"></script>
</head>
<body>
	<label>请选择图片</label><br>
	<input type="file" id="image"><br>
	<label>请输入文字</label><br>
	<input type="text" id="content"><br>
	<label>请选择文字字号</label><br>
	<input type="number" id="fontSize" value='20' max="50" min="10">px<br>
	<button>提交</button><br>
	<img src="" alt="" id="newImage">
</body>
<script>
	$(function(){
		$("button").on('click',getImage);
	});
	function getImage(){
		var image = $("#image")[0].files[0];
		var content = $("#content").val();
		var fontSize = $("#fontSize").val();
		var formData = new FormData();
		formData.append('image', image);
		formData.append('content',content);
		formData.append('fontSize',fontSize);
		$.ajax({
			type: "post",
			url: "handle.php",
			dataType: "json",
			data: formData,
			cache: false,
			processData: false,
			contentType: false,
			success: function (result) {
				//console.log(result);
				document.getElementById("newImage").src = result;
			}
        });
	}
</script>
</html>